<script setup>
import { onMounted, ref, watchEffect } from "vue";

const input = ref(null)
const list = ref(
  ['mike', 'name', 'john']
)
const itemRefs = ref([])

onMounted(() => {
  input.value.focus()
  let [x] = itemRefs.value
  console.log(x)
})

watchEffect(() => {
  if (input.value) {
    input.value.focus()
  } else {
    // 此时还未挂载，或此元素已经被卸载（例如通过 v-if 控制）
    console.log('DOM not found')
  }
})

</script>

<template>
  <div>
    <input type="text" ref="input">
  </div>
  <hr />
  <ul>
    <li v-for="(item,index) of list" :key="index" ref="itemRefs">
      {{item}}
    </li>
  </ul>
</template>